<template>
  <el-breadcrumb separator="/">
    <template v-for="item in changeRoute" :key="item.index">
      <el-breadcrumb-item
        :to="{ path: item.meta.redirect ? item.meta.redirect : item.path }"
      >
        {{ item.meta.title }}
      </el-breadcrumb-item>
    </template>
  </el-breadcrumb>
</template>

<script>
import { ref, onMounted } from 'vue';
import { useRoute, onBeforeRouteUpdate } from 'vue-router';
export default {
  name: 'breadcrumb',
  setup() {
    const route = useRoute();
    const changeRoute = ref([]);

    onMounted(() => {
      let matched = route.matched.filter(
        (item) => item.meta && item.meta.title
      );
      matched.shift(0, 1);
      changeRoute.value = matched;
    });

    onBeforeRouteUpdate((to) => {
      let matched = to.matched.filter((item) => item.meta && item.meta.title);
      matched.shift(0, 1);
      changeRoute.value = matched;
    });

    return {
      changeRoute,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>